<script setup>
import {ref, onBeforeUpdate, inject} from "vue";
import {elErrorMessageTip} from "@/utils/MessageTipUtils.js";
import {updateProductCategorySubAPI} from "@/api/product.js";

const env = import.meta.env
const PRODUCT_CATEGORY_NAME_MAX_LEN = env.VITE_PRODUCT_CATEGORY_NAME_MAX_LEN
const PRODUCT_CATEGORY_CODE_MAX_LEN = env.VITE_PRODUCT_CATEGORY_CODE_MAX_LEN
const PRODUCT_CATEGORY_DESC_MAX_LEN = env.VITE_PRODUCT_CATEGORY_DESC_MAX_LEN

const {updateProductCategorySubVisible, searchByCondition, productCategorySub} = inject('updateProductCategorySub')

const props = defineProps({
  data: {type: Array, default: []}
})

// 二级分类数据
const id = ref('')
const productCategoryId = ref('')
const name = ref('')
const code = ref('')
const disabled = ref(false)
const description = ref('')
const selectValue = ref('')
const selectOptions = ref([])
onBeforeUpdate(() => {
  selectOptions.value = []
  props.data.forEach(item => selectOptions.value.push({value: item.id, label: item.name}))
  id.value = productCategorySub.value.id
  productCategoryId.value = productCategorySub.value.productCategoryId
  name.value = productCategorySub.value.name
  code.value = productCategorySub.value.code
  disabled.value = productCategorySub.value.disabled
  description.value = productCategorySub.value.description
  selectValue.value = productCategorySub.value.productCategoryId
})

// 新增商品分类
const updateProductCategorySub = async () => {
  if (selectValue.value === '' || name.value.length <= 0 || code.value.length <= 0) {
    elErrorMessageTip("请先完成输入")
    return
  }
  const res = await ElMessageBox.confirm(
      `是否确认提交二级商品分类`,
      '新增二级商品分类',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    return await updateProductCategorySubAPI(id.value, selectValue.value, name.value, code.value, disabled.value, description.value)
  }).catch(() => {
    return false
  })
  // 成功
  if (res) {
    // 输入框数据清除
    id.value = ''
    productCategoryId.value = ''
    name.value = ''
    code.value = ''
    disabled.value = false
    description.value = ''
    selectValue.value = ''
    // 关闭窗口
    updateProductCategorySubVisible.value = false
    // 重新查询数据
    searchByCondition()
  }
}
</script>

<template>
  <div>
    <el-dialog v-model="updateProductCategorySubVisible" title="修改商品二级分类">
      <el-form
          label-position="right"
          label-width="160px"
      >
        <el-form-item label="二级商品分类 ID">{{ id }}</el-form-item>
        <el-form-item label="选择所属一级商品分类">
          <el-select v-model="selectValue" class="" placeholder="选择所属一级商品分类">
            <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类名称">
          <el-input
              v-model="name"
              placeholder="请输入商品分类名称"
              clearable
              :maxlength="PRODUCT_CATEGORY_NAME_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品分类编码">
          <el-input
              v-model="code"
              placeholder="请输入商品分类编码"
              clearable
              :maxlength="PRODUCT_CATEGORY_CODE_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品分类是否禁用">
          <el-radio-group v-model="disabled" class="ml-4">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品分类描述">
          <el-input
              autosize
              type="textarea"
              placeholder="请输入商品分类描述"
              clearable
              v-model="description"
              :maxlength="PRODUCT_CATEGORY_DESC_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
      </el-form>
      <div class="flex justify-end items-center">
        <el-button type="primary" @click="updateProductCategorySub">提交修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>